import React, { Component } from 'react';
import autoBind from 'react-autobind';
import { NavBar, Icon, Grid, Tag, Button, Flex } from 'antd-mobile';
// style
import styles from './index.css';
import IconfontStyle from '../../../assets/iconfont/iconfont.css';

class SearchResultNav extends Component {
	constructor(props) {
        super(props)
        autoBind(this)

        this.state = {
        	activeTab: null,
        	priceType: 'downup', // none | downup | updown
        	isShowFilter: false,
        	brandTags: [],
            sortBy: '',
        	searchParam: null
        }
    } 
    componentWillReceiveProps(nextProps) {
        if(nextProps.keywords != this.props.keywords) {
            this.setState({
                minValue: '',
                maxValue: '',
                brandTags: null,
                searchParam: null,
                activeTab: null
            })
        }   
    }
    onClickNewTab() {
    	if(this.state.activeTab === 'new') {
    		this.setState({
    			activeTab: null
    		}, this.onSubmitSearch.bind(this, null))
    	} else {
    		this.setState({
    			activeTab: 'new'
    		}, this.onSubmitSearch.bind(this, 'new'))
    	}
    }
    onClickSaleTab() {
    	if(this.state.activeTab === 'sale') {
    		this.setState({
    			activeTab: null
    		}, this.onSubmitSearch.bind(this, null))
    	} else {
    		this.setState({
    			activeTab: 'sale'
    		}, this.onSubmitSearch.bind(this, 'sale'))
    	}
    }
    onClickPriceTab() {
    	if(this.state.activeTab === 'price') {
    		this.setState({
    			activeTab: 'price',
    			priceType: this.state.priceType === 'downup' ? 'updown' : 'downup'
    		}, this.onSubmitSearch.bind(this, 'price'))
    	} else {
    		this.setState({
    			activeTab: 'price'
    		}, this.onSubmitSearch.bind(this, 'price'))
    	}
    }
    onSubmitSearch(type) {
    	const { keywords, dispatch } = this.props
    	let sortBy = ''

    	switch( type ) {
    		case 'new':
    			sortBy = 'latest'
    			break;
    		case 'sale':
    			sortBy = 'sale+desc'
    			break;
    		case 'price':
    			sortBy = this.state.priceType === 'downup' ? 'price+asc' : 'price+desc'
    			break;
    	}
    	this.setState({
            sortBy
        }, () => {
            let searchParam = this.state.searchParam || {}
            dispatch({
                type: 'meyley/searchProduction',
                payload: {
                    ...searchParam,
                    sortBy,
                    keywords
                }
            })
        })
    }
    getBrand() {
    	const { meyley } = this.props
    	let obj = {}
    	let brandArr = []
    	meyley.searchProductionInfo && meyley.searchProductionInfo 
    		&& meyley.searchProductionInfo.goodsList && meyley.searchProductionInfo.goodsList.map(p => {
    		if(p.brandId) {
    			if(!obj[p.brandId]) {
    				brandArr.push({
    					name: p.brandName,
    					id: p.brandId
    				})
    				obj[p.brandId] = p.brandName
    			} 
    		}
    	})
    	return brandArr
    }
    onTagChange(brandId, selected) {
    	this.setState({
    		brandTags: {
    			...this.state.brandTags,
    			[brandId]: selected
    		}
    	})
    }
    resetFilter() {
    	this.setState({
    		minValue: '',
    		maxValue: '',
    		brandTags: null,
    		searchParam: null
    	})
    }
    submitFilter() {
    	const { dispatch, keywords } = this.props

    	if(!this.state.minValue && !this.state.maxValue && !this.state.brandTags) {
    		this.setState({
    			isShowFilter: false
    		})
    		return false
    	}
    	this.setState({
    		isShowFilter: false,
    		searchParam: {
    			startPrice: this.state.minValue,
    			endPrice: this.state.maxValue,
    			brandId: (() => {
		    		let arr = []
		    		for(let i in this.state.brandTags) {
		    			arr.push(i)
		    		}
		    		return arr.join(',')
		    	})()
    		}
    	}, () => {
    		dispatch({
	    		type: 'meyley/searchProduction',
	    		payload: {
	    			...this.state.searchParam,
                    sortBy: this.state.sortBy,
    				keywords
    			}
	    	})
    	})
    }
	render() {
		const { keywords } = this.props

		const brandArr = this.getBrand()

	 	return (
	 		<div className={styles['search-result-nav']}>
	 			<Flex>
		 			<Flex.Item>
			 			<div onClick={this.onClickNewTab} className={styles["search-result-nav-item"]} style={this.state.activeTab === 'new' ? { color: '#FF003D'} : null}>
			 			最新
			 			</div>
		 			</Flex.Item>
		 			<Flex.Item>
		 				<div onClick={this.onClickSaleTab} className={styles["search-result-nav-item"]} style={this.state.activeTab === 'sale' ? { color: '#FF003D'} : null}>
			 			销量
			 			</div>
		 			</Flex.Item>
		 			<Flex.Item>
		 				<div onClick={this.onClickPriceTab} className={styles["search-result-nav-item"]} style={this.state.activeTab === 'price' ? { color: '#FF003D'} : null}>
			 				<span style={{marginRight: '0.06rem'}}>价格</span>

			 				<i className={`${IconfontStyle['meyley-icon']} ${IconfontStyle['meyley-icon-arrow-up']} ${styles['search-result-icon']} `} style={this.state.priceType === 'updown' ? {display: 'inline-block'} : {display: 'none'}}/>
			 				<i className={`${IconfontStyle['meyley-icon']} ${IconfontStyle['meyley-icon-arrow-down']} ${styles['search-result-icon']} `}  style={this.state.priceType === 'downup' ? {display: 'inline-block'} : {display: 'none'}}/>
			 			</div>
		 			</Flex.Item>
		 			<Flex.Item>
		 				<div className={styles["search-result-nav-item"]} onClick={() => this.setState({isShowFilter: true})}
		 					style={this.state.searchParam ? {color: '#ff0052'} : null}>
			 				<span style={{marginRight: '0.06rem'}}>筛选</span>
			 				<i className={`${IconfontStyle['meyley-icon']} ${IconfontStyle['meyley-icon-filter']} ${styles['search-result-icon']} `}/>
			 			</div>
		 			</Flex.Item>
	 			</Flex>

	 			<div className="search-result-nav-filter">
		 			<div onClick={() => this.setState({ isShowFilter: false })} className={styles['search-result-nav-filter-mask']} 
		 				style={this.state.isShowFilter ? {display: 'block'} : null}></div>
		 			<div className={styles['search-result-nav-filter']} style={this.state.isShowFilter ? {right: 0} : null}>

		 				<div className={styles['search-result-nav-filter-item']}>
			 				<span style={{marginRight: '0.24rem'}}>价格区间</span>
			 				<input 
			 					value={this.state.minValue}
			 					onChange={(e) => {this.setState({ minValue: e.target.value })}}
			 					placeholder="最低价" 
			 					className={styles['search-result-nav-filter-input']} 
			 					/>
			 				<span className={styles['search-result-nav-filter-split']}></span>
			 				<input 
			 					value={this.state.maxValue}
			 					onChange={(e) => {this.setState({ maxValue: e.target.value })}}
			 					placeholder="最高价" 
			 					className={styles['search-result-nav-filter-input']} 
			 					/>
		 				</div>
		 				<div className={styles['search-result-nav-filter-item']} style={{borderBottom: 'none'}}>
			 				<span >品牌</span>
			 				<div className="search-result-nav-filter-pinpai" style={{marginTop: '0.12rem', marginBottom: '0.12rem'}}>
			 					<Grid data={brandArr} columnNum={3} hasLine={false}
			 						renderItem={(dataItem, index) => (
			 							<Tag key={index} selected={this.state.brandTags && this.state.brandTags[dataItem.id]} onChange={this.onTagChange.bind(this, dataItem.id)}>
			 								<span style={{fontSize: '0.22rem', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}>{dataItem.name}</span>
			 							</Tag>
			 							)} />
			 				</div>
		 				</div>
		 				<div className="search-result-nav-filter-controll" style={{width: '100%', position: 'absolute', bottom: 0}}>
		 					<Flex>
					          <Flex.Item><div onClick={this.resetFilter} className={styles['search-result-nav-filter-button']}>重置</div></Flex.Item>
					          <Flex.Item><div onClick={this.submitFilter} className={styles['search-result-nav-filter-button']} style={{background: '#FF0052', color: '#fff'}}>确定</div></Flex.Item>
					        </Flex>
		 				</div>
		 			</div>
	 			</div>
	 		</div>
	  	);
	}
};

SearchResultNav.propTypes = {
};

export default SearchResultNav
